<template>
  <!-- !房态管理 -->
  <a-card size="small" class="room-state">
    <div v-if="noRoom" class="no-room">
      <a-empty :description="emptyTxt" />
    </div>
    <template v-else>
      <div v-if="loading" class="no-room">
        <a-spin tip="加载中" />
      </div>
      <a-row :gutter="[12, 8]" v-else type="flex" justify="space-between" align="middle">
        <a-col :flex="1" style="display:flex;">
          <div
            v-for="status of roomStatusList"
            :key="status.key"
            class="status-box"
            :class="{
              'checked-status':
                currentStatus && currentStatus.key == status.key,
            }"
            @click="handleRoomStatusFilter(status)"
          >
            <span class="color" :style="{ background: status.color }"></span>
            <span class="title">{{ status.title }}</span>
          </div>
        </a-col>
        <a-col>
          <a-button
            type="primary"
            @click="to2DView"
            :loading="showTwoDimensLoading"
          >{{
              showTwoDimensional ? "取消展示2D平面图" : "展示2D平面图"
            }}</a-button
          >
        </a-col>
      </a-row>
      <a-row style="margin: 10px 0 15px 0" v-if="currentStatus">
        <a-switch checked-children="显示无关房源" un-checked-children="隐藏无关房源"  v-model:checked="checkedMode" />
      </a-row>
      <div class="mt-10">
        <template v-if="!showTwoDimensional">
          <a-row
            v-for="layer of roomControlData"
            :key="layer.layer_id"
            type="flex"
            :wrap="false"
            :style="getListStyle(layer.room_list)"
          >
            <a-col flex="80px" style="padding: 5px 0" v-if="showType == 'build'">
              <div class="room-left">
                <div class="layer-name">{{ layer.layer_name }}</div>
                <div class="build-area">{{ layer.build_area }}㎡</div>
              </div>
            </a-col>
            <a-col flex="auto">
              <div class="room-right">
                <div
                  class="room-box"
                  v-for="room of layer.room_list"
                  :key="room.id"
                  :style="room.is_rent ? (projectType == 'village' ? 'width:200px' : 'width:' + (room.areaRatio || 10) + '%;' ): 'width:200px'"
                  :class="{
                  viewHide:viewMode==2&&
                  currentStatus &&
                  currentStatus.key != room.roomColorType,
                }"
                >
                  <a-tooltip>
                    <template #title>
                      <div v-if="room.is_rent">
                        <div>{{ room.tenant_name }}</div>
                        <div>{{ room.room_name }}({{ room.build_area }}㎡)</div>
                        <div>{{ getExpireTimeTxt(room) }}</div>
                      </div>
                      <div v-else>
                        <div>
                        <span style="min-width: 100px;display: inline-block;">
                          {{ room.room_name }}
                              <span v-if=" room.rent_area && (room.room_status == 20 || room.room_status == 30) " >
                                ({{ room.rent_area.lease_square }}m²/{{ room.build_area }}m²)
                              </span >
                              <span v-else-if="room.is_lock" >
                                ({{ room.locked_area }}m²/{{ room.build_area }}m²)
                              </span>
                              <span v-else>({{ room.build_area }}m²)</span>
                        </span>
                          <span style="min-width: 100px;display: inline-block;"> {{ room.tenant_name ? room.tenant_name : '未入住' }}</span>
                        </div>
                        <div>
                          <span style="min-width: 100px;display: inline-block;">人数：{{room.peopleNum}}</span>
                          <span style="min-width: 100px;display: inline-block;">用途：{{room.house_type_txt ? room.house_type_txt : '--'}}</span>
                        </div>
                        <div v-if="room.over_fee">{{room.over_fee}}元</div>
                      </div>
                    </template>
                    <div
                      v-if="room.is_rent"
                      class="room"
                      :style="'background:' + room.roomColor"
                      :class="{
                      bordered: room.show_status != 4,
                      dark:
                        viewMode==1&&
                        currentStatus &&
                        currentStatus.key != room.roomColorType,

                    }"
                      @click="onRoomClick(room, layer)"
                    >
                      <div class="tenant-name nowrap">
                        {{ room.tenant_name }}
                      </div>
                      <div class="tenant-name nowrap">
                        {{ room.room_name }}
                        ({{ room.build_area }}㎡)
                      </div>
                      <div class="expire-time nowrap">
                        {{ getExpireTimeTxt(room) }}
                      </div>

                      <div
                        class="room-bottom"
                        v-if="room.show_tags && room.show_tags.length"
                      >
                        <div class="room-tags">
                        <span
                          v-for="(tag, tagIndex) of room.show_tags"
                          :key="tagIndex"
                          :style="{
                           backgroundColor: tag === '逾' ? 'rgba(221, 25, 25, 0.4)' : (tag === '售' ? 'rgba(0, 0, 255, 0.4)' : 'rgba(0, 0, 0, 0.2)'),
                          }"
                          class="tag"
                        >
                          {{ tag }}
                        </span>
                        </div>
                      </div>
                    </div>

                    <div
                      v-else
                      class="room"
                      :style="'background:' + room.roomColor"
                      :class="{
                      bordered: room.show_status != 4,
                      dark:
                        viewMode==1&&
                        currentStatus &&
                        currentStatus.key != room.roomColorType,

                    }"
                      @click="onRoomClick(room, layer)"
                    >
                      <div class="textEllipsis" style="font-size: 13px">
                      <span style="width: 60%;display: inline-block;" class="textEllipsis">
                         {{ room.room_name }}
                         <span v-if=" room.rent_area && (room.room_status == 20 || room.room_status == 30) " >
                                 ({{ room.rent_area.lease_square }}m²/{{ room.build_area }}m²)
                               </span >
                         <span v-else-if="room.is_lock" >
                                 ({{ room.locked_area }}m²/{{ room.build_area }}m²)
                               </span>
                         <span v-else>({{ room.build_area }}m²)</span>
                      </span>
                        <span style="width: 40%;display: inline-block;" class="textEllipsis">{{ room.tenant_name ? room.tenant_name : '未入住' }}</span>
                      </div>
                      <div class="textEllipsis" style="font-size: 13px">
                        <span style="width: 60%;display: inline-block;" class="textEllipsis">人数：{{room.peopleNum}}</span>
                        <span style="width: 40%;display: inline-block;" class="textEllipsis">用途：{{room.house_type_txt ? room.house_type_txt : '--'}}</span>
                      </div>
                      <div v-if="room.over_fee" class="textEllipsis" style="font-size: 13px">
                       <span style="color: red;">
                          欠费金额：{{room.over_fee}}元
                       </span>
                      </div>

                      <div
                        class="room-bottom"
                        v-if="room.show_tags && room.show_tags.length"
                      >
                        <div class="room-tags">
                        <span
                          v-for="(tag, tagIndex) of room.show_tags"
                          :key="tagIndex"
                          :style="{
                           backgroundColor: tag === '逾' ? 'rgba(221, 25, 25, 0.4)' : (tag === '售' ? 'rgba(0, 0, 255, 0.4)' : 'rgba(0, 0, 0, 0.2)'),
                          }"
                          class="tag"
                        >
                          {{ tag }}
                        </span>
                        </div>
                      </div>
                    </div>
                  </a-tooltip>
                </div>
              </div>
            </a-col>
          </a-row>
        </template>

        <!--  2D图    -->
        <template v-else>
          <div style="display: flex">
            <div style="margin-right: 16px" v-if="showType == 'build'">
              <div
                v-for="layer in twoDimensionalLayers"
                :key="layer.layer_id"
                class="two_map_left"
                :class="
                          activeTwoDimensionalLayerId == layer.layer_id
                            ? 'active_map_left'
                            : ''
                        "
                @click.stop="change2DLayer(layer.layer_id)"
              >
                {{ layer.layer_name }}
              </div>
            </div>
            <div
              class="canvas-container-wrap"
              id="managementCenterLayerCanvas_dimensional"
            >
              <div class="canvas-container-action">
                <a-space>
                  <a-button
                    v-if="showTwoDimensional"
                    type="primary"
                    shape="circle"
                    @click.stop="handleEditLayer"
                  >
                    <template #icon><EditOutlined /></template>
                  </a-button>
                  <a-button
                    type="primary"
                    shape="circle"
                    @click.stop="canvasFitZoom"
                  >
                    <template #icon><RedoOutlined /></template>
                  </a-button>
                </a-space>
              </div>
              <canvas
                class="canvas-sectionDrawing canvas-sectionDrawing_dimensional"
              ></canvas>
            </div>
          </div>
        </template>
      </div>
    </template>

    <!-- 房源详情 -->
    <RoomDrawer
      :visible="detailVisible"
      :detail="currentRoom"
      pageFrom="ManagementCenter"
      :maxRoomNumber="maxRoomNumber"
      @cancel="onRoomDetailClose"
    />

    <Layer2DEdit
      :visible="twoDimensionalVisible"
      :roomList="
        (currentTwoDimensional && currentTwoDimensional.room_list) || []
      "
      :editInfo="currentTwoDimensional && currentTwoDimensional.two_dimensional"
      :villageId="villageId"
      :layerId="activeTwoDimensionalLayerId"
      :saveRequest="true"
      @handleClose="handleClose"
      @handleOK="handleOK"
    />
  </a-card>
</template>
<script>
import {defineComponent, reactive, toRefs, computed, watch, ref, nextTick, onUnmounted} from "vue";
import request from "../../../common/utils/request";
import RoomDrawer from "../RoomDrawer.vue";
import moment from "moment";
import store from "../../../store";
import {uuid} from "vue-uuid";
import utils from "@/common/utils/utils";
import CanvasSelect from "canvas-select";
import {EditOutlined, RedoOutlined} from "@ant-design/icons-vue";
import Layer2DEdit from "@/views/village/BuildingManage/modules/Layer2DEdit.vue";

export default defineComponent({
  name: "RoomStateManage",
  props: {
    // 调取页面
    pageFrom: {
      type: String,
      default: "",
    },
    // 展示类型 build layer
    showType: {
      type: String,
      default: "build",
    },
    // 项目id
    villageId: {
      type: Number,
      default: 0,
    },
    // 楼宇id
    buildId: {
      type: Number,
      default: 0,
    },
    // 楼层id
    layerId: {
      type: Number,
      default: 0,
    },
  },
  components: {Layer2DEdit, EditOutlined, RedoOutlined, RoomDrawer },
  setup(props, { emit }) {
    const state = reactive({
      roomControlData: [],
      noRoom: false,
      roomStatusList: [],
      currentStatus: undefined,
      loading: false,
      detailVisible: false,
      currentRoom: {},
      maxRoomNumber: 0,
      viewMode:1,
      checkedMode:true,
      showTwoDimensLoading: false,
      showTwoDimensional: false, // 展示二维
      canvasInstance: null,
      twoDimensionalLayers: [],
      activeTwoDimensionalLayerId: 0,
      twoDimensionalVisible: false,
    });
    const BgImg = utils.staticPath + "images/common/two_dimensional_bg.png";
    watch(()=>state.checkedMode,(val)=>{
      if(val){
        state.viewMode = 1
      }else {
        state.viewMode = 2
      }
    })

    const currentTwoDimensional = computed(() =>
      state.twoDimensionalLayers.find(
        (v) => v.layer_id == state.activeTwoDimensionalLayerId
      )
    );

    const to2DView = () => {
      state.showTwoDimensLoading = true;
      state.showTwoDimensional = !state.showTwoDimensional;
      if (state.showTwoDimensional) {
        getRoomControlData();
        //profiles();
      } else {
        getRoomControlData();
        //profiles();
        if (state.canvasInstance) {
          state.canvasInstance.destroy();
          state.canvasInstance = null;
        }
      }
    };
    const getListStyle = (list)=>{
      let style = {}
      if(state.viewMode==2){
        if(state.currentStatus){
          let hide_all_item = true

          list.map(item=>{
            if(state.currentStatus.key==item.roomColorType){
              hide_all_item = false
            }
          })
          if(hide_all_item){
            style.display = 'none'
          }
        }
      }

      return style
    }
    const emptyTxt = computed(() => {
      return `该${props.showType == "build" ? "楼宇" : "楼层"}下暂无房源`;
    });

    /** 房源详情关闭 */
    const onRoomDetailClose = () => {
      state.detailVisible = false;
      getRoomControlData();
    };

    /** 查看房源 */
    const onRoomClick = (room, layer) => {
      state.currentRoom = room;
      state.maxRoomNumber = getMaxRoomNumber(layer.room_list);
      state.detailVisible = true;
    };
    // 获取最大房源号
    const getMaxRoomNumber = (list) => {
      let max = 0;
      for (let room of list) {
        if (max < Number(room.room_number)) {
          max = Number(room.room_number);
        }
      }
      return max;
    };

    /** 状态展示文字 */
    const getExpireTimeTxt = (room) => {
      //锁定房间
      if (room.is_lock) {
        // 如果是意向合同锁定
        if (room.extra_lock && room.extra_lock.length > 0) {
          room.lock_end_time = room.extra_lock[0].purposeUnlockTime;
          room.extra_lock.forEach((item) => {
            // 找出最近时间
            if (moment(item.purposeUnlockTime).isBefore(room.lock_end_time)) {
              room.lock_end_time = item.purposeUnlockTime;
            }
          });
          return `${room.lock_reason},锁定至${room.lock_end_time}`;
        } else {
          return `${room.lock_reason}`;
        }
      } else {
        const status = Number(room.show_status);
        if (status > 3 && status < 7) {
          return `${room.lease_end_date}到期`;
        } else if (status == 1) {
          return `空置${room.vacant_days}日`;
        } else if (status == 7) {
          return `${room.lease_end_date}已到期`;
        }
        return "";
      }
    };

    const setCurrentRoomStyle = (info = {}, roomId, roomList = []) => {
      if (roomId) {
        let roomInfo = roomList.find((v) => v.id == roomId);
        info.bindRoomId = roomInfo.id;
        info.bindRoomInfo = roomInfo;
        let bindColor = roomInfo?.roomColor;
        if (bindColor) {
          let roomFillColor = utils.getHexOpacityColor({
            color: bindColor,
            opacity: 0.9,
          });
          info.strokeStyle = "#fff";
          info.roomLineColor = "#fff";
          info.fillStyle = roomFillColor;
          info.roomFillColor = roomFillColor;
        }
        info.label = roomInfo?.room_name || "";
        info.labelFont = "14px sans-serif";
      } else {
        info.label = "";
        info.strokeStyle = "#2681f3";
        info.fillStyle = "#fff";
        delete info.bindRoomId;
        delete info.bindRoomInfo;
        delete info.roomLineColor;
        delete info.roomFillColor;
      }
      return info;
    };

    const initCanvasInstance = () => {
      // 2D图初始化
      if (!state.canvasInstance) {
        state.canvasInstance = new CanvasSelect(
          `.canvas-sectionDrawing_dimensional`,
          currentTwoDimensional.value?.two_dimensional?.bg_img || BgImg
        );
        state.canvasInstance.fillStyle = "rgba(255, 255, 255)";
        state.canvasInstance.strokeStyle = "#2681f3";
        state.canvasInstance.activeFillStyle = "#d3e3fd";
        state.canvasInstance.activeStrokeStyle = "#2681f3";
        state.canvasInstance.on("select", (info) => {
          if (!info) return;
          info.active = false;
          // 点击有房间 展示房间详情 没有房间 提示或者设置房间
          if (info?.bindRoomId) {
            state.currentRoom = info.bindRoomInfo;
            state.maxRoomNumber = getMaxRoomNumber(
              currentTwoDimensional.value?.room_list || []
            );
            state.detailVisible = true;
          }
        });
      }
      state.canvasInstance.setImage(currentTwoDimensional.value?.two_dimensional?.bg_img || BgImg);
      state.canvasInstance.scrollZoom = false;
      let option = currentTwoDimensional.value?.two_dimensional?.coorList || [];
      // 加载数据
      // 加载数据
      state.canvasInstance.setData(option);
      state.canvasInstance.update();
    };

    /** 获取房态数据 */
    const getRoomControlData = (init = false) => {
      if (init) {
        state.loading = true;
      }
      const params = {
        buildId: props.buildId,
        villageId: props.villageId,
      };
      if (props.showType == "layer") {
        params.layerId = props.layerId;
      }
      request.get("/village", "/profile/profile", params).then((res) => {
        if (res.list && res.list.length > 0) {
          res.list.forEach((layer) => {
            let totalArea = Number(layer.build_area);
            if (totalArea) {
              //  有房间含有面积
              const emptyRoom = layer.room_list.filter(
                (item) => !item.build_area || item.build_area == 0
              );
              const emptyRoomArea = emptyRoom.length ? totalArea * 10 * 0.01 : 0;
              layer.room_list.forEach((room, roomIndex) => {
                if (Number(room.build_area)) {
                  // 计算比例
                  room.areaRatio = parseRatio(
                    ((Number(room.build_area) + emptyRoomArea) / totalArea) * 100
                  );
                  if (Number(room.areaRatio) > 100) {
                    room.areaRatio = 100;
                  }
                  if (Number(room.areaRatio) < 10) {
                    room.areaRatio = 10;
                  }
                } else {
                  // 没有面积仍然算10%
                  room.areaRatio = 10;
                }
              });
              handleRoomFinalArea(layer.room_list);
            } else {
              // 所有房间都是空的，超过10个房间按10%，不超过10个房间一行均分
              setEmptyRoomRatio(layer.room_list);
            }
            if (layer?.two_dimensional?.coorList?.length) {
              layer.two_dimensional.coorList.forEach((v) => {
                if (v.bindRoomId) {
                  v = setCurrentRoomStyle(v, v.bindRoomId, layer.room_list);
                }
              });
            } else {
              // console.log(layer.room_list, 'layer.room_list================')
              // 初始化 (默认排列房间)
              let editArr = [];
              let percentTotal = 100;
              let percentRow = 1;
              let percentCol = 0;
              let _roomList = (layer.room_list || []).map((v) => {
                percentTotal = percentTotal - Number(v.areaRatio);
                if (percentTotal < 0) {
                  percentTotal = 100;
                  percentRow ++;
                  percentCol = 1;
                } else {
                  percentCol ++;
                }
                return { id: v.id, areaRatio: Number(v.areaRatio), row: percentRow, col: percentCol};
              });
              let gapWidth = 14;
              let colHeight = 60;
              for (let i = 0; i < _roomList.length; i++) {
                let columnsTotal = _roomList.filter((item) => item.row == _roomList[i].row);
                let widthTotal = 1000 - ((columnsTotal.length + 1)*gapWidth);
                let colWidth = Number(parseRatio(
                  (widthTotal * _roomList[i].areaRatio)/100
                ));
                let beforeTotalArea = 0;
                if (_roomList[i].col > 1) {
                  columnsTotal.forEach((item) => {
                    if (item.col < _roomList[i].col) {
                      beforeTotalArea = Number(beforeTotalArea) + Number(parseRatio(
                        (widthTotal * item.areaRatio)/100
                      ));
                    }
                  })
                }
                let surplusHeight = 666;

                if (_roomList[i].row > 1) {
                  surplusHeight = 666 - (_roomList[i].row - 1) * colHeight - (_roomList[i].row + 1) * gapWidth;
                }
                if (surplusHeight < colHeight) {
                  break;
                }
                _roomList[i].coor = [
                  [(gapWidth * _roomList[i].col) + beforeTotalArea, _roomList[i].row*gapWidth + (_roomList[i].row - 1) * colHeight],
                  [(gapWidth * _roomList[i].col) + beforeTotalArea + colWidth, gapWidth * _roomList[i].row + _roomList[i].row * colHeight],
                ];
                // console.log(beforeTotalArea,colWidth,widthTotal,_roomList[i].coor, 'beforeTotalArea====')
                _roomList[i].index = i;
                _roomList[i].type = 1;
                _roomList[i].uuid = uuid.v4();
                _roomList[i].creating = false;
                _roomList[i].dragging = false;
                _roomList[i].active = false;
                setCurrentRoomStyle(
                  _roomList[i],
                  _roomList[i].id,
                  layer.room_list
                );
                editArr.push(_roomList[i]);
              }
              if (layer.two_dimensional?.bg_img) {
                layer.two_dimensional.coorList = editArr
              } else {
                layer.two_dimensional = {
                  bg_img: '',
                  coorList: editArr,
                }
              }
            }
          });
        }
        state.roomControlData = res?.list || [];
        state.twoDimensionalLayers = res?.list || [];
        let findLayerId = state.twoDimensionalLayers.find(
          (v) => v.layer_id == state.activeTwoDimensionalLayerId
        );
        state.activeTwoDimensionalLayerId = findLayerId ? findLayerId.layer_id
          : state.twoDimensionalLayers[0]?.layer_id;
        state.noRoom = res.list.length == 0;
        state.roomStatusList = res.room_status_color.map((item) => {
          item.key = `${item.type}_${item.limit}`;
          return item;
        });
        state.loading = false;
        state.showTwoDimensLoading = false;
        if (state.showTwoDimensional) {
          let canvasWidth = document.getElementById(
            `managementCenterLayerCanvas_dimensional`
          ).clientWidth;
          let height = canvasWidth * 0.666;
          document.getElementById(
            `managementCenterLayerCanvas_dimensional`
          ).style.height = height + "px";
          nextTick(() => {
            initCanvasInstance();
          });
        }
      });
    };

    /** 筛选房源 */
    const handleRoomStatusFilter = (status) => {
      if (state.showTwoDimensional) return;
      if (state.currentStatus && state.currentStatus.key == status.key) {
        state.currentStatus = undefined;
      } else {
        state.currentStatus = status;
      }
    };

    const change2DLayer = (id) => {
      state.activeTwoDimensionalLayerId = id;
      initCanvasInstance();
    };

    const handleEditLayer = () => {
      // 编辑楼层2D 平面图
      state.twoDimensionalVisible = true;
    };

    const canvasFitZoom = () => {
      if (state.canvasInstance) {
        state.canvasInstance.fitZoom();
      }
    };

    const handleClose = () => {
      state.twoDimensionalVisible = false;
    };

    const handleOK = (val) => {
      getRoomControlData();
      handleClose();
    };

    // 设置空房间比例 endIndex不包含
    const setEmptyRoomRatio = (list, startIndex = 0, endIndex) => {
      endIndex = endIndex || list.length;
      let length = endIndex - startIndex;
      if (length < 10) {
        for (let i = startIndex; i < endIndex; i++) {
          list[i].areaRatio = parseRatio(100 / length);
        }
      } else {
        const remainder = length % 10;
        const integer = length / 10;
        for (let i = integer * 10; i < remainder; i++) {
          list[i].areaRatio = parseRatio(100 / remainder);
        }
      }
    };

    // 整理房间的最终比例
    const handleRoomFinalArea = (list) => {
      let total = 0;
      let lastIndex = 0;
      for (let i = 0; i < list.length; i++) {
        let item = list[i];
        total = total + Number(item.areaRatio);
        if (i == list.length - 1) {
          if (total >= 100) {
            // 只剩最后一个会折行
            setBeforeArea(list, lastIndex, i);
            setBeforeArea(list, i, i + 1);
          } else {
            // 最后一行铺不满的情况
            setBeforeArea(list, lastIndex, i + 1);
          }
        } else if (total >= 100) {
          // 面积已满一行
          setBeforeArea(list, lastIndex, i);
          total = Number(item.areaRatio);
          lastIndex = i;
        }
      }
    };

    // 回溯处理
    const setBeforeArea = (list, lastIndex, currentIndex) => {
      if (currentIndex == 0) {
        list[0].areaRatio = 100;
        return;
      }
      const hasAreaRoom = [];
      let total = 0;
      for (let i = lastIndex; i < currentIndex; i++) {
        const item = list[i];
        if (Number(item.build_area)) {
          hasAreaRoom.push(item);
          total = Number(total) + Number(item.areaRatio);
        }
      }
      if (hasAreaRoom.length) {
        const emptyNum = currentIndex - lastIndex - hasAreaRoom.length;
        let remainTotal = 100 - emptyNum * 10; // 除去空房间剩余总空间
        for (let item of hasAreaRoom) {
          item.areaRatio = parseRatio(
            (Number(item.areaRatio) / total) * remainTotal
          );
        }
      } else {
        setEmptyRoomRatio(list, lastIndex, currentIndex);
      }
    };

    const parseRatio = (number, decimal = 2) => {
      return (Math.floor(number * 100) / 100).toFixed(decimal);
    };

    const projectType = ref("");

    const init = () => {
      if(store.getters.buildingInfo.permissionBuildings[0].type){
        projectType.value = store.getters.buildingInfo.permissionBuildings[0].type;
      }
      getRoomControlData(true);
    };

    init();

    onUnmounted(() => {
      if (state.canvasInstance) {
        state.canvasInstance.destroy();
        state.canvasInstance = null;
      }
    });

    return {
      projectType,
      emptyTxt,
      ...toRefs(state),
      currentTwoDimensional,
      to2DView,
      handleRoomStatusFilter,
      getExpireTimeTxt,
      onRoomClick,
      onRoomDetailClose,
      getListStyle,
      change2DLayer,
      handleEditLayer,
      canvasFitZoom,
      handleClose,
      handleOK,
    };
  },
});
</script>
<style lang="less" scoped>
.room-state {
  width: 100%;
  min-height: 100%;
  font-size: 12px;
  .no-room {
    margin-top: 20%;
    text-align: center;
  }
  .status-box {
    margin: 0 6px;
    padding: 2px 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    .color {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
  }
  .checked-status {
    background: #f4f4f4;
  }
  .room-left {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: #f7f7f7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .layer-name {
      color: #000;
      font-weight: 600;
      font-size: 15px;
    }
  }
  .room-right {
    display: flex;
    flex-wrap: wrap;
    margin-left: 6px;
    .room-box {
      padding: 5px 3px;
      min-width: 10%;
      position: relative;

      .room {
        height: 84px;
        padding: 4px 8px;
        border-radius: 6px;
        background: #a9dcfd;
        cursor: pointer;
        line-height: 20px;
        position: relative;
        &:hover {
          transform: scale(1.02);
          transition: all 0.2s;
          z-index: 100;
          box-shadow: @box-shadow-base;
        }
        .tenant-name {
          color: #000;
        }
        .expire-time {
          color: rgba(0, 0, 0, 0.35);
          font-size: 12px;
        }
        .room-bottom {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          font-size: 12px;
          position: absolute;
          right: 4px;
          bottom: 4px;
          .room-tags {
            .tag {
              padding: 2px 4px;
              color: #fff;
              margin-right: 4px;
              border-radius: 2px;
            }
          }
        }
      }
      .bordered {
        border: 3px dashed rgb(143, 163, 183);
      }
      .dark {
        opacity: 0.4;
      }
    }
  }
}
.viewHide{
  display: none;
}

.textEllipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.two_map_left {
  width: 72px;
  background-color: #9a9a9a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 6px 0;
  margin-bottom: 10px;
  border-radius: 4px;
  cursor: pointer;
}

.active_map_left {
  background: @primary-color;
}

.canvas-container-wrap {
  width: 100%;
  position: relative;
  .canvas-sectionDrawing {
    width: 100%;
    height: 100%;
  }
  .canvas-container-action {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}
</style>
